<!DOCTYPE html>
<html> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>BootMetro Demo - Table</title>

        <link rel="stylesheet" type="text/css" href="/LongkongWeb/plugin/bootmetro/css/bootmetro.css">
        <link rel="stylesheet" type="text/css" href="/LongkongWeb/plugin/bootmetro/css/bootmetro-responsive.css">
        <link rel="stylesheet" type="text/css" href="/LongkongWeb/plugin/bootmetro/css/bootmetro-icons.css">
        <link rel="stylesheet" type="text/css" href="/LongkongWeb/plugin/bootmetro/css/bootmetro-ui-light.css">
        <link rel="stylesheet" type="text/css" href="/LongkongWeb/plugin/bootmetro/css/datepicker.css">

        <script src="/LongkongWeb/plugin/jquery/jquery.min.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/modernizr-2.6.2.min.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/bootstrap.min.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/bootmetro-panorama.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/bootmetro-pivot.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/bootmetro-charms.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/bootstrap-datepicker.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/jquery.mousewheel.min.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/jquery.touchSwipe.min.js"></script>
        <script src="/LongkongWeb/plugin/bootmetro/js/holder.js"></script>
        <!--<script src="/LongkongWeb/plugin/bootmetro/js/demo.js"></script>-->

    </head>

    <body>
        <header id="nav-bar" class="container">
            <div class="row">
                <div class="span12">
                    <div id="header-container">
                        <a id="backbutton" class="win-backbutton" href="./hub.html"></a>
                        <h5>青岛龙港船舶工程公司</h5>
                        <div class="dropdown">
                            <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#" >
                                信息办公系统
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="./table.html">表格</a></li>
                                <li class="divider"></li>
                                <li><a href="./index.html">主页</a></li>
                            </ul>
                        </div>
                    </div>
                    <div id="top-info" class="pull-right">
                        <!--                        <a id="settings" href="#" class="win-command pull-right">
                                                    <span class="win-commandicon win-commandring icon-cog-3"></span>
                                                </a>-->
                        <a id="logged-user" href="#" class="win-command pull-right">
                            <span class="win-commandicon win-commandring icon-user"></span>
                        </a>
                        <div class="pull-left">
                            <h3>FirstName</h3>
                            <h4>LastName</h4>
                        </div>
                    </div>
                </div>
            </div>
        </header>
<!--
        <div class="container">
            <div class="row">
                <div class="metro span12">
                    <div class="metro-sections">

                        <div class="metro-section" id="section1">

                            <a class="tile wide imagetext bg-color-orange" href="./list-detail.html">
                                <div class="image-wrapper">
                                    <img src="/LongkongWeb/plugin/bootmetro/img/Windows8.png" />
                                </div>
                                <div class="column-text">
                                    <div class="text-header3">Listview with Details</div>
                                </div>
                            </a>

                            <a class="tile wide imagetext tile-double bg-color-green" href="#">
                                <div class="image-wrapper">
                                    <img src="/LongkongWeb/plugin/bootmetro/img/logo.png" />
                                </div>
                                <div class="column-text">
                                    <div class="text-header3">...more to come...</div>
                                </div>
                            </a>

                        </div>

                        
                    </div>
                </div>
            </div>
        </div>-->
        <div class="container">

            <div class="metro panorama">
                <div class="panorama-sections">

                    <div class="panorama-section">

                        <h2>Featured pictures</h2>

                        <div class="tile-column-span-2">
                            <a class="tile wide imagetext wideimage bg-color-blue" href="#">
                                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Darvasa_gas_crater_panorama.jpg/640px-Darvasa_gas_crater_panorama.jpg" alt=""/>
                                <div class="textover-wrapper bg-color-blueDark">
                                    <div class="text2">The Door to Hell, a burning natural gas field in Derweze, Turkmenistan</div>
                                </div>
                            </a>

                            <a class="tile wide imagetext wideimage bg-color-green" href="#">
                                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Lady_Elliot_Island_SVII.jpg/320px-Lady_Elliot_Island_SVII.jpg" alt=""/>
                                <div class="textover-wrapper transparent">
                                    <div class="text2">An image of the coral reef near Lady Elliot Island</div>
                                </div>
                            </a>

                            <a class="tile square image bg-color-red" href="#">
                                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Wulfenite_mexique.jpg/611px-Wulfenite_mexique.jpg" alt=""/>
                                <div class="textover-wrapper transparent">
                                    <div class="text2">Wulfenite </div>
                                </div>
                            </a>

                            <a class="tile square image" href="#">
                                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Hagia_Sophia_Mars_2013.jpg/640px-Hagia_Sophia_Mars_2013.jpg" alt=""/>
                                <div class="textover-wrapper transparent">
                                    <div class="text2">Hagia Sophia</div>
                                </div>
                            </a>

                        </div>

                        <div class="tile-column-span-1">
                            <a class="tile squarepeek bg-color-orange" href="#">
                                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Anastomus_oscitans_-_Bueng_Boraphet.jpg/384px-Anastomus_oscitans_-_Bueng_Boraphet.jpg" alt=""/>
                                <div class="text-inner">
                                    <div class="text4">The Asian Openbill or Asian Openbill Stork (Anastomus oscitans) is a large wading bird in the stork family Ciconiidae.</div>
                                </div>
                            </a>

                        </div>

                    </div>

                    <div class="panorama-section">

                        <h2>Featured articles</h2>

                        <div class="tile-column-span-2">
                            <a class="tile widepeek" href="#">
                                <div class="tile wide image">
                                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Fuso_Trial_Heading_Left.jpg/640px-Fuso_Trial_Heading_Left.jpg" alt=""/>
                                </div>
                                <div class="tile wide text">
                                    <div class="text-header">Fusō</div>
                                    <div class="text4">Japanese battleship Fusō (扶桑, a classical name for Japan) was the lead ship of the two Fusō-class dreadnought battleships built for the Imperial Japanese Navy.</div>
                                </div>
                            </a>

                            <a class="tile wide imagetext wideimage bg-color-green" href="#">
                                <img src="http://upload.wikimedia.org/wikipedia/en/e/e9/Famous_Fantastic_Mysteries_August_1942_cover.jpg" alt=""/>
                                <div class="textover-wrapper transparent">
                                    <div class="text2">Famous Fantastic Mysteries</div>
                                </div>
                            </a>

                        </div>


                    </div>


                </div>
            </div>
        </div>

        <div class="container">

            <div class="metro panorama">
                <div class="panorama-sections">


                    <div class="panorama-section tile-span-3">

                        <h2>Featured apps</h2>

                        <a class="tile app bg-color-orange" href="#">
                            <div class="image-wrapper">
                                <span class="icon icon-mail"></span>
                            </div>
                            <div class="app-label">Mail</div>
                            <div class="app-count">12</div>
                        </a>

                        <a class="tile app bg-color-blue" href="#">
                            <div class="image-wrapper">
                                <span class="icon icon-map"></span>
                            </div>
                            <div class="app-label">Map</div>
                        </a>

                        <a class="tile wide imagetext bg-color-greenDark" href="#">
                            <div class="image-wrapper">
                                <span class="icon icon-chat-2"></span>
                            </div>
                            <div class="column-text">
                                <div class="text4">Chat with your friends</div>
                            </div>
                            <div class="app-label">145 friends online</div>
                        </a>

                        <a class="tile app bg-color-purple" href="#">
                            <div class="image-wrapper">
                                <span class="icon icon-weather"></span>
                            </div>
                            <div class="app-label">Weather</div>
                        </a>

                        <a class="tile app bg-color-green" href="#">
                            <div class="image-wrapper">
                                <span class="icon icon-linkedin"></span>
                            </div>
                            <div class="app-label">LinkedIn</div>
                        </a>

                    </div>   


                    <div class="panorama-section tile-span-4">

                        <h2>Group two</h2>

                        <a class="tile wide imagetext bg-color-blue" href="#">
                            <div class="image-wrapper">
                                <span class="icon icon-music-3"></span>
                            </div>
                            <div class="column-text">
                                <div class="text">Top 10</div>
                                <div class="text">Favorites</div>
                                <div class="text">Best choices</div>
                            </div>
                            <span class="app-label">MUSIC</span>
                        </a>

                        <a class="tile wide imagetext bg-color-blueDark" href="./base-css.html">
                            <div class="image-wrapper">
                                <img src="assets/img/Coding app.png" />
                            </div>
                            <div class="column-text">
                                <div class="text">Typography</div>
                                <div class="text">Tables</div>
                                <div class="text">Forms</div>
                                <div class="text">Buttons</div>
                            </div>
                            <span class="app-label">BASE CSS</span>
                        </a>

                        <a class="tile app bg-color-orange" href="#">
                            <div class="image-wrapper">
                                <img src="assets/img/RegEdit.png" alt="" />
                            </div>
                            <span class="app-label">COMPONENTS</span>
                        </a>

                        <a class="tile app bg-color-red" href="./javascript.html">
                            <div class="image-wrapper">
                                <img src="assets/img/Devices.png" alt="" />
                            </div>
                            <span class="app-label">JAVASCRIPT</span>
                        </a>

                    </div>


                </div>

            </div>
        </div>        

    </body>
</html>
